<template>
  <div>
    <nav-bar
      title="意见反馈"
      @goBack="goBack"
    />
    <div class="all-content">
      <div class="mg">简介</div>
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        placeholder="请描述你的问题"
        class="textarea mg br"
        maxlength="100"
        show-word-limit
      />
      <van-uploader />
      <div class="tips mg">最多6张, 单个图片不超过20M</div>
      <div class="mg way">联系方式</div>
      <van-field
        v-model="tel"
        placeholder="请输入手机号码便于联系（非必填）"
        class="textarea br"
      />
      <van-button
        class="submit-btn"
        color="linear-gradient(-45deg, #ff6034, #ee0a24)"
        @click="onLogin"
      >
        提交反馈
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FeedbackPage',
  data() {
    return {
      message: '',
      tel: '',
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  },
}
</script>

<style lang="less" scoped>
  .all-content{
    padding: 16px;
    box-sizing: border-box;

    .textarea {
      background-color: #f7f8fa;
    }
  }

  // 下边距
  .mg {
    margin-bottom: 12px;
    font-size: 14px;
  }

  // 圆角
  .br {
    border-radius: 8px;
  }

  .tips {
    color: #cccccc;
    font-size: 12px;
  }

  .way {
    font-size: 14px;
  }

  .submit-btn {
    width: 92%;
    position: absolute;
    bottom: 70px;
    left: 16px;
    right: 16px;
  }
</style>
